<!DOCTYPE html>
<html><head>
        <meta charset="utf-8">
    <title>童老师ThinkPHP交流群：484519446</title>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
    <meta name="description" content="Dashboard">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!--Basic Styles-->
    <link href="__PUBLIC__/style/bootstrap.css" rel="stylesheet">
    <link href="__PUBLIC__/style/font-awesome.css" rel="stylesheet">
    <link href="__PUBLIC__/style/weather-icons.css" rel="stylesheet">

    <!--Beyond styles-->
    <link id="beyond-link" href="__PUBLIC__/style/beyond.css" rel="stylesheet" type="text/css">
    <link href="__PUBLIC__/style/demo.css" rel="stylesheet">
    <link href="__PUBLIC__/style/typicons.css" rel="stylesheet">
    <link href="__PUBLIC__/style/animate.css" rel="stylesheet">  
  
    <style type="text/css">
        .btn-file {
  position: relative;
  overflow: hidden;
  vertical-align: middle;
}
.btn-file > input {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  font-size: 23px;
  cursor: pointer;
  filter: alpha(opacity=0);
  opacity: 0;
 
  direction: ltr;
}
.fileinput {
  display: inline-block;
  margin-bottom: 9px;
}
.fileinput .form-control {
  display: inline-block;
  padding-top: 7px;
  padding-bottom: 5px;
  margin-bottom: 0;
  vertical-align: middle;
  cursor: text;
}
.fileinput .thumbnail {
  display: inline-block;
  margin-bottom: 5px;
  overflow: hidden;
  text-align: center;
  vertical-align: middle;
}
.fileinput .thumbnail > img {
  max-height: 100%;
}
.fileinput .btn {
  vertical-align: middle;
}
.fileinput-exists .fileinput-new,
.fileinput-new .fileinput-exists {
  display: none;
}
.fileinput-inline .fileinput-controls {
  display: inline;
}
.fileinput-filename {
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
}
.form-control .fileinput-filename {
  vertical-align: bottom;
}
.fileinput.input-group {
  display: table;
}
.fileinput.input-group > * {
  position: relative;
  z-index: 2;
}
.fileinput.input-group > .btn-file {
  z-index: 1;
}
.fileinput-new.input-group .btn-file,
.fileinput-new .input-group .btn-file {
  border-radius: 0 4px 4px 0;
}
.fileinput-new.input-group .btn-file.btn-xs,
.fileinput-new .input-group .btn-file.btn-xs,
.fileinput-new.input-group .btn-file.btn-sm,
.fileinput-new .input-group .btn-file.btn-sm {
  border-radius: 0 3px 3px 0;
}
.fileinput-new.input-group .btn-file.btn-lg,
.fileinput-new .input-group .btn-file.btn-lg {
  border-radius: 0 6px 6px 0;
}
.form-group.has-warning .fileinput .fileinput-preview {
  color: #8a6d3b;
}
.form-group.has-warning .fileinput .thumbnail {
  border-color: #faebcc;
}
.form-group.has-error .fileinput .fileinput-preview {
  color: #a94442;
}
.form-group.has-error .fileinput .thumbnail {
  border-color: #ebccd1;
}
.form-group.has-success .fileinput .fileinput-preview {
  color: #3c763d;
}
.form-group.has-success .fileinput .thumbnail {
  border-color: #d6e9c6;
}
.input-group-addon:not(:first-child) {
  border-left: 0;
}
.page-sidebar{right:730.4px;left:0px;}

    </style>
    <script type="text/javascript">

 
+function ($) { "use strict";
 
  var isIE = window.navigator.appName == 'Microsoft Internet Explorer'
 
  // FILEUPLOAD PUBLIC CLASS DEFINITION
  // =================================
 
  var Fileinput = function (element, options) {
    this.$element = $(element)
    
    this.$input = this.$element.find(':file');
    // console.log(this.$input);
    if (this.$input.length === 0) return
 
    this.name = this.$input.attr('name') || options.name
 // console.log(this.name);
    this.$hidden = this.$element.find('input[type=hidden][name="' + this.name + '"]');
    // console.log(this.$hidden.length === 0);
    if (this.$hidden.length === 0) {
      this.$hidden = $('<input type="hidden">').insertBefore(this.$input);
      // console.log(this.$hidden);
    }
 
    this.$preview = this.$element.find('.fileinput-preview');
    // console.log(this.$preview);
    var height = this.$preview.css('height')
    if (this.$preview.css('display') !== 'inline' && height !== '0px' && height !== 'none') {
      this.$preview.css('line-height', height)
    }
        
    this.original = {
      exists: this.$element.hasClass('fileinput-exists'),
      preview: this.$preview.html(),
      hiddenVal: this.$hidden.val()
    }
    // console.log(this.original);
    this.listen()
  }
  
  Fileinput.prototype.listen = function() {
    this.$input.on('change.bs.fileinput', $.proxy(this.change, this))
    $(this.$input[0].form).on('reset.bs.fileinput', $.proxy(this.reset, this))
    
    this.$element.find('[data-trigger="fileinput"]').on('click.bs.fileinput', $.proxy(this.trigger, this))
    this.$element.find('[data-dismiss="fileinput"]').on('click.bs.fileinput', $.proxy(this.clear, this))
  },
 
  Fileinput.prototype.change = function(e) {
    var files = e.target.files === undefined ? (e.target && e.target.value ? [{ name: e.target.value.replace(/^.+\\/, '')}] : []) : e.target.files
  // console.log(this);
    e.stopPropagation()
 
    if (files.length === 0) {
      this.clear()
      return
    }
    // console.log(this);
    this.$hidden.val('')
    this.$hidden.attr('name', '')
    this.$input.attr('name', this.name)
 
    var file = files[0]
 console.log(file);
    if (this.$preview.length > 0 && (typeof file.type !== "undefined" ? file.type.match(/^image\/(gif|png|jpeg)$/) : file.name.match(/\.(gif|png|jpe?g)$/i)) && typeof FileReader !== "undefined") {
      var reader = new FileReader()
      var preview = this.$preview
      var element = this.$element

      reader.onload = function(re) {
        var $img = $('<img>')
        console.log('aa');
        $img[0].src = re.target.result
        files[0].result = re.target.result
        console.log(re.target.result);
        element.find('.fileinput-filename').text(file.name)
        
        // if parent has max-height, using `(max-)height: 100%` on child doesn't take padding and border into account
        if (preview.css('max-height') != 'none') $img.css('max-height', parseInt(preview.css('max-height'), 10) - parseInt(preview.css('padding-top'), 10) - parseInt(preview.css('padding-bottom'), 10)  - parseInt(preview.css('border-top'), 10) - parseInt(preview.css('border-bottom'), 10))
        
        preview.html($img)
        element.addClass('fileinput-exists').removeClass('fileinput-new')
 
        element.trigger('change.bs.fileinput', files)
      }
 
      reader.readAsDataURL(file)
    } else {
      this.$element.find('.fileinput-filename').text(file.name)
      this.$preview.text(file.name)
      
      this.$element.addClass('fileinput-exists').removeClass('fileinput-new')
      
      this.$element.trigger('change.bs.fileinput')
    }
  },
 
  Fileinput.prototype.clear = function(e) {
    if (e) e.preventDefault()
    
    this.$hidden.val('')
    this.$hidden.attr('name', this.name)
    this.$input.attr('name', '')
 
    //ie8+ doesn't support changing the value of input with type=file so clone instead
    if (isIE) { 
      var inputClone = this.$input.clone(true);
      this.$input.after(inputClone);
      this.$input.remove();
      this.$input = inputClone;
    } else {
      this.$input.val('')
    }
 
    this.$preview.html('')
    this.$element.find('.fileinput-filename').text('')
    this.$element.addClass('fileinput-new').removeClass('fileinput-exists')
    
    if (e !== undefined) {
      this.$input.trigger('change')
      this.$element.trigger('clear.bs.fileinput')
    }
  },
 
  Fileinput.prototype.reset = function() {
    this.clear()
 
    this.$hidden.val(this.original.hiddenVal)
    this.$preview.html(this.original.preview)
    this.$element.find('.fileinput-filename').text('')
 
    if (this.original.exists) this.$element.addClass('fileinput-exists').removeClass('fileinput-new')
     else this.$element.addClass('fileinput-new').removeClass('fileinput-exists')
    
    this.$element.trigger('reset.bs.fileinput')
  },
 
  Fileinput.prototype.trigger = function(e) {
    this.$input.trigger('click')
    e.preventDefault()
  }
 
  
  // FILEUPLOAD PLUGIN DEFINITION
  // ===========================
 
  var old = $.fn.fileinput
  
  $.fn.fileinput = function (options) {
    return this.each(function () {
      var $this = $(this),
          data = $this.data('bs.fileinput')
      if (!data) $this.data('bs.fileinput', (data = new Fileinput(this, options)))
      if (typeof options == 'string') data[options]()
    })
  }
 
  $.fn.fileinput.Constructor = Fileinput
 
 
  // FILEINPUT NO CONFLICT
  // ====================
 
  $.fn.fileinput.noConflict = function () {
    $.fn.fileinput = old
    return this
  }
 
 
  // FILEUPLOAD DATA-API
  // ==================
 
  $(document).on('click.fileinput.data-api', '[data-provides="fileinput"]', function (e) {
    var $this = $(this)
    if ($this.data('bs.fileinput')) return
    $this.fileinput($this.data())
      
    var $target = $(e.target).closest('[data-dismiss="fileinput"],[data-trigger="fileinput"]');
    if ($target.length > 0) {
      e.preventDefault()
      $target.trigger('click.bs.fileinput')
    }
  })
 
}(window.jQuery);

    </script>
</head>
<body>
    <!-- 头部 -->
    {include file='common/header'}

    <!-- /头部 -->
    
    <div class="main-container container-fluid">
        <div class="page-container">
             <!-- Page Sidebar -->
           {include file='common/left'}
            <!-- /Page Sidebar -->
            <!-- Page Content -->
            <div class="page-content">
                <!-- Page Breadcrumb -->
                <div class="page-breadcrumbs">
                    <ul class="breadcrumb">
                        <li>
                            <a href="javascript:void(0)">系统</a>
                        </li>
                        <li>
                            <a href="{:url('admin/lists')}">主题图片列表</a>
                        </li>
                        <li class="active">
                            <a href="{:url('admin/add')}">
                                {if condition="$type =='1'"}信息修改{/if}
                                {if condition="$type =='2'"}信息详情{/if}
                            </a>
                        </li>
                    </ul>
                </div>
                <!-- /Page Breadcrumb -->

                <!-- Page Body -->
                <div class="page-body">
                    
                <div class="row">
                    <div class="col-lg-12 col-sm-12 col-xs-12">
                        <div class="widget">
                            <div class="widget-header bordered-bottom bordered-blue">
                                <span class="widget-caption">图片信息修改</span>
                            </div>
                            <div class="widget-body" style='height:600px;'>
                                <div id="horizontal-form">
                                    <form class="form-horizontal" enctype="multipart/form-data" role="form" action="{:url('Pictureinfo/edit')}" method="post">
                                        <div class="form-group">
                                            <label for="username" class="col-sm-2 control-label no-padding-right">图片主题</label>
                                            <div class="col-sm-6">
                                                <input type="hidden" name="id" value="{$pictureinfo['id']}">
                                                <input class="form-control" {if condition="$type =='2'"}readonly="readonly"{/if} id="username" placeholder="" name="sportitem"  type="text" value="{$pictureinfo['sportitem']}">
                                               <!--  {if condition="$type =='2'"}
                                                    <input class="form-control" readonly="readonly" id="username" placeholder="" name="username"  type="text" value="{$pictureinfo['sportitem']}">
                                                {/if}
                                                {if condition="$type =='1'"}
                                                    <input class="form-control" id="username" placeholder="" name="username"  type="text" value="{$pictureinfo['sportitem']}">
                                                {/if} -->
                                                
                                            </div>
                                            <p class="help-block col-sm-4 red"{if condition="$type =='2'"} style='display:none;' {/if}>* 必填(不可超过50个汉字)</p>
                                        </div>

                                        <div class="form-group">
                                            <label for="group_id" class="col-sm-2 control-label no-padding-right">拍照时间</label>
                                            <div class="col-sm-6">
                                                <input class="form-control" {if condition="$type =='2'"}readonly="readonly"{/if} id="username" placeholder="" name="phototime"  type="text" value="{$pictureinfo['phototime']}">
                                            </div>
                                            <p class="help-block col-sm-4 red"{if condition="$type =='2'"} style='display:none;' {/if}>* 时间不可为空</p>
                                        </div>  

                                        <div class="form-group">
                                            <label for="group_id" class="col-sm-2 control-label no-padding-right">拍照地址</label>
                                            <div class="col-sm-6">
                                                <input class="form-control" {if condition="$type =='2'"}readonly="readonly"{/if} id="username" placeholder="" name="photoaddress"  type="text" value="{$pictureinfo['photoaddress']}">
                                            </div>
                                            <p class="help-block col-sm-4 red"{if condition="$type =='2'"} style='display:none;' {/if}>* 拍照地点不可为空</p>
                                        </div>
                                        <div class="form-group">
                                        <label for="group_id" class="col-sm-2 control-label no-padding-right">拍照图片</label>
                                            <div style='float:left;margin-left:1.2%;width:350px;height:300px;'>
                                                <!-- <img src="{$pictureinfo['photourl']}" style='width:100px;height:80px;'>
                                                <input class="form-control" {if condition="$type =='2'"}readonly="readonly"{/if} id="username" placeholder="" name="photourl"  type="hidden" value="{$pictureinfo['photourl']}"> -->
                                                <div class="form-group">
                                                    <div class="col-md-8">
                                                        <div class="fileinput fileinput-new" data-provides="fileinput" id="uploadImageDiv" style='width:300px;'>
                                                            <div class="fileinput-new thumbnail" {if condition="$type =='1'"} style="width: 200px; height: 150px;" {/if} {if condition="$type =='2'"} style='width:520px;height:360px;' {/if} >
                                                                <img src="__UPLOADS__{$pictureinfo['photourl']}" alt="{$pictureinfo['sportitem']}" {if condition="$type =='1'"} style='width:190px;height:140px;' {/if} {if condition="$type =='2'"} style='width:520px;height:360px;' {/if}>
                                                            </div>
                                                            <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"></div>
                                                            <div {if condition="$type =='2'"} style='display:none;' {/if}>
                                                                <span class="btn default btn-file"> <span
                                                                                    class="fileinput-new">选择图片</span> <span class="fileinput-exists">更改</span> 
                                                                                    <input type="file" name="uploadImage" id="uploadImage" />
                                                                                </span>
                                                                <a href="#" class="btn default fileinput-exists" data-dismiss="fileinput">移除</a>
                                                                <span>请选择1M以内图片</span>
                                                            </div>
                                                        </div>
                                                        <div id="titleImageError" style="color: #a94442"></div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                        <p class="help-block col-sm-4 red"{if condition="$type =='2'"} style='display:none;' {/if}>* 图片必须上传</p>
                                      </div>
                                       
                                        <!-- <form action="{:url('Pictureinfo/upload')}" enctype="multipart/form-data" method="post"> -->
                                          
                                        <!-- </form> -->
                                        <div class="form-group" {if condition="$type =='2'"} style='display:none;' {/if}>
                                            <div class="col-sm-offset-2 col-sm-10">
                                                <button type="submit"  class="btn btn-default">保存信息</button>
                                            </div>
                                        </div>   
                                    </form>
                                   <!--  <form action="{:url('Pictureinfo/upload')}" enctype="multipart/form-data" method="post">
                                      <input type="file" name="image" /> <br> 
                                      <input type="text" name="aaa" /> <br> 
                                      <input type="text" name="bbb" /> <br> 
                                      <button type="submit"  >上传</button> 
                                    </form>  -->
                                  
                                </div>
                                
                            </div>
                        </div>
                    </div>
                </div>
                </div>
                <!-- /Page Body -->
            </div>
            <!-- /Page Content -->
        </div>  
    </div>
    <!--Basic Scripts-->
    <script src="__PUBLIC__/style/jquery_002.js"></script>
    <script src="__PUBLIC__/style/bootstrap.js"></script>
    <script src="__PUBLIC__/style/jquery.js"></script>
    <!--Beyond Scripts-->
    <script src="__PUBLIC__/style/beyond.js"></script>
    
    <script type="text/javascript">
        function testfund(){
          console.log($('input[name=uploadImage]').val());
        }
    </script>

</body></html>